@font-face {
    font-family: 'MyCustomFont';
    src: url("../MaShanZheng-Regular.ttf") format('woff'),
}
.moodtabel{
    height: 100%;
    margin: 0;
    background-size: cover;
    background: url("../背景2.jpg") no-repeat center / cover;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover; /* 确保背景图片铺满整个元素区域 */
    width: 100%;
    display: flex;
    align-items: center; 
    justify-content: center;
    font-family: Arial, sans-serif,'MyCustomFont'; /* 增加字体样式 */
}
/* 轻微的文本阴影以提升可读性 */
* {
    text-shadow: 1px 1px 2px rgba(0,0,0,0.1);
}


#jar-container {
    width: 500px;
    height: 500px;
    border-radius: 50%; /* 创建圆形容器 */
    background: rgba(255, 255, 255, 0.2); /* 更透明的背景 */
    box-shadow: 0 0 30px rgba(0, 0, 0, 0.5), inset 0 0 20px rgba(255, 255, 255, 0.5); /* 外部阴影和内部光晕 */
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
    position: relative;
    overflow: hidden; /* 确保心情图标不会移出容器 */
    border: 5px solid rgba(255, 255, 255, 0.4); /* 边框，增加悬浮感 */
    background:url("../圆形背景.png") no-repeat center / cover;
    transform: translate3d(0, 0, 1px) rotate(0deg); /* 添加轻微的3D转换以稳定 */
    will-change: transform; /* 优化变换性能 */
    animation: rotate 40s ease-in-out infinite; /* 使用更平滑的动画过渡效果 */
    backface-visibility: hidden;
    animation-timing-function: linear;
    transform-origin: center center;
    animation: rotate 40s linear infinite;
}

@keyframes rotate {
  0% {
    transform: translate3d(0, 0, 1px) rotate(0deg);
  }
  100% {
    transform: translate3d(0, 0, 1px) rotate(360deg);
  }
}

.jar-container img {
width: 100%; /*设置图片宽度为容器宽度 */
height: 100%;  /*设置图片高度为容器高度 */
object-fit: cover; /* 保持图片比例,填充容器 */
}

#mood-container {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
}

.mood {
    position: absolute;
    cursor: pointer;
    transition: transform 2s ease-in-out;
    filter: drop-shadow(2px 4px 6px black);
    font-size: 48px;
    transform: scale(1.1);
    opacity: 0.95;
    animation: float 10s infinite ease-in-out;
    transform: translate(var(--translate-x), var(--translate-y)) scale(1.1);
  }
  
  @keyframes float {
    0%, 100% {
      transform: translate(0, 0) scale(1.1);
    }
    25% {
      transform: translate(30px, -50px) scale(1.1); /* 增加位移距离 */
    }
    50% {
      transform: translate(-30px, 50px) scale(1.1); /* 增加位移距离 */
    }
    75% {
      transform: translate(25px, -25px) scale(1.1); /* 增加位移距离 */
    }
  }
  

.modal {
    position: fixed;       /* 使用 fixed 定位，使模态框相对于视口定位 */
    top: 50%;              /* 将模态框顶部定位到视口中心 */
    left: 50%;             /* 将模态框左边定位到视口中心 */
    transform: translate(-50%, -50%); /* 使用 translate 调整模态框位置，使其完全居中 */
    overflow: hidden;
    border-radius: 15px;
    display: none; /* 确保模态框初始为隐藏状态 */
    position: fixed;
    padding: 20px;         /* 内边距 */
    z-index: 1000; /* 确保模态框在最前面 */
    background-color: rgba(0,0,0,0.4); /* 半透明黑色背景 */
    background:url("../便签3.jpg"); 
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;  
    box-shadow: 0 8px 16px rgba(0,0,0,0.2); /* 阴影效果 */
}

.modal.show {
    display: block; /* 当模态框需要显示时 */
}



.modal-content {
    position: relative;
    padding: 20px;
    text-align: center;
    color: #333;
    font-family: 'Arial', sans-serif;
}

.info-section {
    position: relative;
    margin: 20px 0;
    padding: 10px;
    background: white;
    border-radius: 10px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.date-info, .event-info, .location-info, .frequency-info {
    margin: 10px 0;
    padding: 5px 10px;
    color: #555;
    border-radius: 10px;
    transition: background-color 0.3s ease;
}

.date-info {
    color: #2c3e50; /* 深蓝色调 */
    background: linear-gradient(45deg, rgba(231, 76, 60, 0.6), rgba(192, 57, 43, 0.6));
}

.event-info {
    color: #dcaef0; /* 暗紫色调 */
    background: linear-gradient(45deg, rgba(142, 68, 173, 0.6), rgba(154, 89, 181, 0.6));
}

.location-info {
    color: #82ead5; /* 海洋绿 */
    background: linear-gradient(45deg, rgba(26, 188, 156, 0.6), rgba(22, 160, 133, 0.6));
}

.frequency-info {
    color: #ecd3ac; /* 亮橙色 */
    background: linear-gradient(45deg, rgba(243, 156, 18, 0.6), rgba(211, 84, 0, 0.6));
}

/* 添加一个悬停效果增强交互性 */
.date-info:hover, .event-info:hover, .location-info:hover, .frequency-info:hover {
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
    transform: scale(1.05);
}


.close-button {
    color: white;
    position: absolute;
    top: 10px;
    right: 10px;
    font-size: 24px;
    cursor: pointer;
    font-weight: bold;
    border-radius: 25px;
    padding: 10px 20px;
    border: none; /* 去除默认边框 */
    transition: background-color 0.3s, box
}

.close-button:hover {
    color: #777;
}

#chat-container {
    position: fixed;
    bottom: 20px; /* 略微增加距离底部的空间 */
    background-color: #ffffff; /* 纯白背景色 */
    border-radius: 15px; /* 更圆润的边角 */
    overflow: hidden;
    border: 1px solid #ddd; /* 添加边框提升视觉效果 */
    right: 20px;   /* 固定在页面右侧 */
    width: 350px;  /* 固定宽度 */
    height: 500px; /* 固定高度 */
    background-color: #fff;  /* 白色背景 */
    box-shadow: 0 4px 15px rgba(0,0,0,0.2); /* 轻微柔和的阴影效果 */
    display: flex;
    flex-direction: column;
    overflow: hidden;  /* 隐藏外部溢出 */
    z-index: 1050; /* 确保在最上层 */
    margin-right: 50px;
}

#chat-header {
    background-color:#62dbe4; /* 鼠标悬停效果 *//* 更新为更柔和的蓝色 */
    color: white;
    padding: 12px 15px;
    font-size: 18px; /* 字体大小调整 */
    font-weight: 500; /* 字体粗细 */
    text-align: center;
    font-weight: bold; /* 更加突出的字体加粗 */
    border-top-left-radius: 20px; /* 圆角匹配容器 */
    border-top-right-radius: 20px;
}

#chat-header img {
    height: 50px; /* 控制图像的高度 */
    vertical-align: middle; /* 使图像与文字垂直对齐 */
    margin-right: 10px; /* 在图像和文字之间添加一些间隔 */
}


#chat-body {
    padding: 20px; /* 更多内边距 */
    overflow-y: auto;
    flex-grow: 1;
    background: #f8f9fa; /* 轻微的背景色差异 */
    overflow-y: auto; /* 允许内容溢出时垂直滚动 */
}

.chat-message {
    background-color: #e7e7e7; /* 调整对话框颜色 */
    border-radius: 20px; /* 更圆的消息气泡 */
    padding: 10px 15px;
    margin: 8px 0; /* 增加消息间距 */
    max-width: 80%; /* 调整最大宽度提供更好的布局 */
    word-wrap: break-word; /* 确保长文本换行 */
    box-shadow: 1px 1px 2px rgba(0,0,0,0.05); /* 细微阴影增加深度感 */
    position: relative; /* 相对定位 */
}

.chat-message.user-message {
    align-self: flex-end; /* 用户消息右对齐 */
    background-color: #c8d9e9; /* 用户消息的颜色 */
}

.chat-message.ai-message {
    align-self: flex-start; /* AI消息左对齐 */
    background-color: #fde4d4; /* AI消息的颜色 */
}


#chat-input button {
    background-color: #62dbe4; /* 亮色按钮 */
    color: white; /* 白色文本 */
    font-weight: bold; /* 加粗字体 */
    box-shadow: 0 4px 8px rgba(0, 153, 204, 0.3); /* 适当的阴影增加立体感 */
    border: none;
    border-radius: 15px; /* 按钮边角 */
    padding: 8px 16px;
    cursor: pointer;
    transition: background 0.3s; /* 平滑背景过渡效果 */
}

#chat-input button:hover {
    background-color: #50c6d8; /* 鼠标悬停时更深的颜色 */
}

#chat-input {
    display: flex;
    padding: 10px;
    background: #f1f1f1; /* 输入区域的背景颜色 */
    border-top: 1px solid #ccc; /* 分隔线 */
}

#chat-input input {
    flex-grow: 1;
    border: 2px solid #ccc; /* 输入框边框 */
    border-radius: 15px; /* 输入框边角 */
    padding: 8px 12px;
    border-radius: 25px; /* 圆润的输入框 */
    margin-right: 8px; /* 留出按钮空间 */
}


